<script lang="tsx" setup>
import { ref } from 'vue'
import { SuitTableColumnCtx, SuitVsTable } from '@suit/front-base-components-v3'
import { TableColumnCtx } from 'element-plus'
import { treeData } from './tree'

interface TableDataItem {
  label: string
  label1: string
  label2: string
  label3: string
  label4: string
}
const columns = ref<
  SuitTableColumnCtx<{
    [_: string]: any
  }>[]
>([
  {
    label: '名称 ',
    prop: 'name',
    treeNode: true,
  },
  {
    label: '编码',
    prop: 'code',
    formatter:'dict'
  },
  {
    label: '定义',
    prop: 'definition',
    formatter:'dict',
    render: (info) => {
      return <div> {info.row.route}</div>
    },
  },
  {
    label: '路径',
    prop: 'route',
  },
  {
    label: '组织',
    prop: 'org',
    formatter: 'dict|org_type',
  },
  {
    type: 'operation',
    list: [
      {
        label: '编辑',
        click(info) {
          debugger
          console.log(info.row)
        },
      },
    ],
  },
])

const data = ref(treeData)

const height = ref(300)

const onCurrentChange = (val: number) => {
  console.log(val)
}

const toggleTreeExpand = (parmas) => {}
const key = ref<string>('')
const vsTableRef = ref()

const searchConfig = {
  color: 'red',
  filterAttrs: ['name', 'code', 'org'],
}

const search = () => {
  vsTableRef.value.searchTree(key.value)
}
</script>
<template>
  <div>
    <el-input v-model="key" @change="search" />
    <SuitVsTable
      ref="vsTableRef"
      isTree
      autoHeight
      @toggle-tree-expand="toggleTreeExpand"
      :data="data"
      :searchConfig
      :columns="columns"
    />
  </div>
</template>
<style lang="scss" scoped></style>
